import React from 'react';
import {
  DesktopOutlined,
  FileOutlined,
  PieChartOutlined,
  TeamOutlined,
  UserOutlined,
} from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Breadcrumb, Layout, Menu } from 'antd';
import { Outlet, useNavigate } from 'react-router-dom';
import './index.css'

const { Content, Footer, Sider } = Layout;

type MenuItem = Required<MenuProps>['items'][number];
 

function App() {
const nav=useNavigate()
  function getItem(
    label: React.ReactNode,
    key: React.Key,
    icon?: React.ReactNode,
    children?: MenuItem[],
  ): MenuItem {
    return {
      key,
      icon,
      children,
      label,
    } as MenuItem;
  }
 
  const items: MenuItem[] = [
    
    getItem('首页', '1', <PieChartOutlined onClick={()=>nav('/home')}/>),
    getItem('文档', '2', <DesktopOutlined onClick={()=>nav('/index')}/>,[]),
    getItem('系统管理', '3', <DesktopOutlined onClick={()=>nav('/index')}/>,[]),
    getItem('异常页', '4', <DesktopOutlined onClick={()=>nav('/index')}/>,[]),
    getItem('alova示例', '5', <DesktopOutlined onClick={()=>nav('/index')}/>,[]),
    getItem('插件示例', '6', <DesktopOutlined onClick={()=>nav('/index')}/>,[]),
    getItem('Pro Naive UI 示例', '7', <DesktopOutlined onClick={()=>nav('/index')}/>,[]),
    getItem('多级菜单', '8', <DesktopOutlined onClick={()=>nav('/index')}/>,[]),
    getItem('系统管理', 'sub1', <UserOutlined ></UserOutlined>, [
      getItem('用户管理', '9',<UserOutlined onClick={()=>nav('/user')}/> ),
      getItem('角色管理', '10',<TeamOutlined onClick={()=>nav('/role')}></TeamOutlined>),
      getItem('菜单管理', '11'),
    ]),
   
    getItem('关于', '12', <FileOutlined />),
  ];
  
 

  return (
    <div>
      <Layout style={{ minHeight: '100vh' }}>
      <Sider collapsible >
        <div className="demo-logo-vertical" />
       
     


        <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline" items={items} />
      </Sider>
      <Layout>
        
        <Content style={{ margin: '0 16px' }}>
          <Breadcrumb style={{ margin: '16px 0' }} items={[{ title: 'User' }, { title: 'Bill' }]} />
          <div
            style={{
              padding: 24,
              minHeight: 360,
              
            }}
          >
           
            <Outlet></Outlet>
          </div>
        </Content>
        <Footer style={{ textAlign: 'center' }}>
        
        </Footer>
      </Layout>
    </Layout> 
    </div>
  )

}

export default App

